$(function(){
	
	$(".box").mousemove(function(event){
		
		$(".bigBox").show()
		
		
		
		$(".mask-box").stop().animate({
			left:(event.pageX - $(".box").position().left) - $(".mask-box").width() / 2,
			top:(event.pageY - $(".box").position().top) - $(".mask-box").height() / 2
		},0,"linear")
		
		$(".mask-box").position().left >= $(".box").width() - $(".mask-box").width() ? $(".mask-box").css({left:$(".box").width() - $(".mask-box").width()}):null
		$(".mask-box").position().top >= $(".box").height() - $(".mask-box").height() ? $(".mask-box").css({top:$(".box").height() - $(".mask-box").height()}):null
		$(".mask-box").position().left <= 0 ? $(".mask-box").css({left:0}):null
		$(".mask-box").position().top <= 0 ? $(".mask-box").css({top:0}):null
		console.log($(".mask-box").position().left)
		
		$(".imgBig").stop().animate({
			left:$(".mask-box").position().left * ($(".bigBox").width() - $(".imgBig").width()) / ($(".box").width() - $(".mask-box").width()),
			top:$(".mask-box").position().top * ($(".bigBox").height() - $(".imgBig").height()) / ($(".box").height() - $(".mask-box").height())
		},400,"linear")
		
	})
	
	$(".box").mouseleave(function(){
						
		$(".bigBox").hide()
		
		
	})
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
})
